<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>
		<view class="content">
			<view class="member-top">
				
				<view class="member-top-c">
					<image class="user-head-img" mode="aspectFill" :src="userInfo.avatar"></image>
					<view class="">
						<view class="user-name fsz34">{{ userInfo.nickname }}</view>
						<view class="fz12 color-f grade">姓名：{{ userInfo.realname }}</view>
					</view>
				</view>
			</view>
		
			<view class="" style="background-color: #fff;">
				<view class="dist-list">
					<view class="dist-item">
						<view class="dist-num fsz34  color-3">{{ info.total_withdraw_money || 0.0 }}</view>
						<view class="dist-name fsz26 color-9">累计收入(元)</view>
						<view class="fsz24 color-3">含待结算{{ info.audit_withdraw_money || 0.0 }}元</view>
					</view>
					<view class="dist-item">
						<view class="dist-num fsz34 color-3">{{ info.frozen_withdraw_money || 0.0 }}</view>
						<view class="dist-name fsz26 color-9">冻结中佣金</view>
					</view>
					<view class="dist-item">
						<view class="dist-num fsz34 color-3">{{ info.already_withdraw_money || 0.0 }}</view>
						<view class="dist-name fsz26 color-9">已结算佣金</view>
					</view>
					<view class="dist-item">
						<view class="dist-num fsz34 color-3">{{ info.wait_withdraw_money || 0.0 }}</view>
						<view class="dist-name fsz26 color-9">待完成佣金</view>
					</view>
				</view>
			</view>
			<view class="cell-group right-img">
				<view class="cell-item" @click="goWithdraw()">
					<view class="cell-item-hd"><view class="cell-hd-title">可提现金额（元）</view></view>
					<view class="cell-item-ft">
						<view class="red-price fsz30">{{ info.can_withdraw_money || 0.0 }}</view>
						<image class="cell-ft-next icon" src="/static/image/right.png"></image>
					</view>
				</view>
			</view>
			<!-- 其他功能菜单 -->
			<view class="member-grid margin-cell-group">
				<view class="member-item">
					<view class="color-3 fsz38">{{ today.today_agent_fee || 0.0 }}</view>
					<text class="member-item-text">今日收益（元）</text>
				</view>
				<view class="member-item">
					<view class="color-3 fsz38">{{ today.today_agent_count || 0 }}</view>
					<text class="member-item-text">今日订单</text>
				</view>
				<view class="member-item">
					<view class="color-3 fsz38">{{ today.today_agent || 0 }}</view>
					<text class="member-item-text">今日新增客户</text>
				</view>
			</view>
			<view class="cell-group margin-cell-group right-img cell-list">
				<navigator class="cell-item" url="/pages/agent/list">
					<view class="cell-item-hd">
						<my-imgicon name="yaoqing" size="22" ></my-imgicon>
						<view class="cell-hd-title">我的邀请</view>
					</view>
					<view class="cell-item-ft"><image class="cell-ft-next icon" src="/static/images/icon-arrow.png"></image></view>
				</navigator>
				<navigator class="cell-item" url="/pages/agent/equity">
					<view class="cell-item-hd">
						<my-imgicon name="zhanghu" size="22"></my-imgicon>
						<view class="cell-hd-title">分销权益</view>
					</view>
					<view class="cell-item-ft"><image class="cell-ft-next icon" src="/static/images/icon-arrow.png"></image></view>
				</navigator>
				<navigator class="cell-item" url="/pages/agent/popularize">
					<view class="cell-item-hd">
						<my-imgicon name="fenxiang" size="22"></my-imgicon>
						<view class="cell-hd-title">我要推广</view>
					</view>
					<view class="cell-item-ft"><image class="cell-ft-next icon" src="/static/images/icon-arrow.png"></image></view>
				</navigator>
				<navigator class="cell-item" url="/pages/agent/profit">
					<view class="cell-item-hd">
						<my-imgicon name="dikou" size="22"></my-imgicon>
						<view class="cell-hd-title">佣金明细</view>
					</view>
					<view class="cell-item-ft"><image class="cell-ft-next icon" src="/static/images/icon-arrow.png"></image></view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import checkLogin from '@/mixins/loginCheck.js'
	export default {
		mixins:[checkLogin],
		data() {
			return {
				nav_title:'分销中心',
				info: {}, //分销商信息
				today:{},
				shareUrl: '/pages/share/jump'
			};
		},
		onShow() {
		},
		onLoad() {
			this.initData();
		},
		computed:{
			...mapState({
				userInfo:state => state.$userInfo,
				config:state => state.$config,
				$s:state => state.$style,
			})
		},
		methods: {
			initData() {
				this.$u.api.agentToDay().then(res=>{
					this.today=res.data
				})
				this.$u.api.withdrawCount().then(res=>{
					this.info=res.data
				})
			},
			//去提现
			goWithdraw() {
				this.$c.a('agent/withdraw_cash')
			},
		},
	};
</script>

<style lang="scss">
	@import '@/static/css/jshop.scss';
	.member-top {
		position: relative;
		width: 100%;
		height: 200upx;
		background-color: var(--view-theme);
	}

	.bg-img {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.member-top-c {
		position: absolute;
		top: 50%;
		left: 50rpx;
		transform: translateY(-50%);
		/* text-align: center; */
		display: flex;
	}

	.user-head-img {
		display: block;
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		overflow: hidden;
		background-color: rgba(255, 255, 255, 0.7);
		margin-right: 20rpx;
	}

	.user-name {
		font-size: 30upx;
		color: #fff;
	}

	.member-grid {
		background-color: #fff;
		/* border-top: 2upx solid #eee; */
		padding: 20upx 0;
	}
	.member-item {
		padding: 0 26rpx;
		text-align: left;
	}
	.margin-cell-group {
		margin: 20upx 0;
		color: #666666;
	}

	.badge {
		left: 80upx;
		top: -6upx;
	}

	button.cell-item-hd {
		background-color: #fff;
		padding: 0;
		line-height: 1.4;
		color: #333;
	}

	button.cell-item-hd:after {
		border: none;
	}

	.login-btn {
		color: #fff;
		width: 160upx;
		height: 50upx;
		line-height: 50upx;
		border-radius: 25upx;
		background: #ff7159;
		font-size: 12px;
		margin-top: 16upx;
	}
	.dist-list {
		overflow: hidden;
		background-color: #fff;
		/* padding: 26rpx 26rpx 0; */
		margin: 0 26rpx;
		border-bottom: 2rpx solid #eee;
	}
	.dist-item {
		width: 50%;
		text-align: left;
		float: left;
		height: 120rpx;
		margin-top: 20rpx;
	}
	.cell-item{
		padding: 0rpx;
	}
	.cell-list .cell-hd-title{
		padding-left: 10rpx;
	}
</style>
